import Chart from "@/components/Chart";
import { useAppSelector } from "@/store/hooks";
import { transformFontSize } from "@/utils";
import { useEffect, useState } from "react";

export default function PieChartComp() {
  const pieOptions = useAppSelector((state) => state.echarts.pieOptions);
  const options = {
    ...pieOptions,
    series: [
      {
        ...pieOptions.series[0],
        label: {
          position: "center",
          show: true,
          formatter: ["{a|428}", "{b|总量}"].join("\n"),
          rich: {
            a: {
              fontSize: 30,
              fontWeight: 600,
            },
            b: {
              fontSize: 14,
            },
          },
        },
        data: [
          { value: 1048, name: "智能主机" },
          { value: 735, name: "智能安防" },
          { value: 735, name: "智能安防2" },
          { value: 735, name: "智能安防3" },
          { value: 735, name: "智能安防4" },
        ],
      },
    ],
  };

  const [opt, setopt] = useState(options);
  const setFontSize = () => {
    const _opt = { ...options };
    _opt.series[0].label.rich.a.fontSize = transformFontSize(40);
    _opt.series[0].label.rich.b.fontSize = transformFontSize(12);
    setopt(_opt);
  };
  useEffect(() => {
    setFontSize();
    window.addEventListener("resize", setFontSize);
  }, []);

  return <Chart options={opt}></Chart>;
}
